/**
 * Created by 李伟伟 on 2017/11/11.
 */
window.onload = function () {
    var bannerWrap = document.getElementById("banner_wrap");
    var banner = document.getElementsByClassName("banner")[0];
    var prevBtn = document.getElementsByClassName("prev")[0];
    var nextBtn = document.getElementsByClassName("next")[0];
    var oimg = banner.getElementsByTagName("img")[0];
    var cir = document.getElementsByClassName("circle")[0];
    var ali = cir.getElementsByTagName("li");
    var oimgW = oimg.clientWidth;//获取一张图片的宽度
    var num = 1;
    nextBtn.onclick = function () {
        num++;
        if(num==6){
            num = 0;
            banner.style.left = -num*oimgW+"px";
            banner.style.transition = "all";
            num=1;
        }

        setTimeout(function () {
            banner.style.left = -num*oimgW+"px";
            banner.style.transition = "all 1s linear";
        },0)
        //setTimeout() 先执行主线程里的语句之后，再执行setTimeout()函数里面的语句

        for(var i=0;i<ali.length;i++){
            ali[i].className = "";
        }
        ali[num-1].className = "active";
    }
    prevBtn.onclick = function () {
        num--;
        if(num==0){
            num = 6;
            banner.style.left = -num*oimgW+"px";
            banner.style.transition = "all";
            num=5;
        }
        setTimeout(function () {
            banner.style.left = -num*oimgW+"px";
            banner.style.transition = "all 1s linear";
        },0)
        for(var i=0;i<ali.length;i++){
            ali[i].className = "";
        }
        ali[num-1].className = "active";
    }
    //定时切换
    function start() {
        tt=setInterval(function () {
            num++;
            if(num==6){
                num = 0;
                banner.style.left = -num*oimgW+"px";
                banner.style.transition = "all";
                num=1;
            }

            setTimeout(function () {
                banner.style.left = -num*oimgW+"px";
                banner.style.transition = "all 1s linear";
            },0)
            //setTimeout() 先执行主线程里的语句之后，再执行setTimeout()函数里面的语句

            for(var i=0;i<ali.length;i++){
                ali[i].className = "";
            }
            ali[num-1].className = "active";
        },2000)
    }
    start();
    bannerWrap.onmouseover = function () {
       clearInterval(tt);
  }
    bannerWrap.onmouseout = function () {
      start();
  }
  for (var i =0;i<ali.length;i++){
      ali[i].index = i;
      ali[i].onmouseover = function () {
          for(var j =0;j<ali.length;j++){
              ali[j].className = " ";
          }
          this.className = "active";
          num = this.index+1;
          banner.style.left = -num*oimgW+"px";
      }
  }
}
